﻿<style scoped>
    .login-box {
        border: 1px solid #DCDFE6;
        width: 300px;
        margin: 40px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px #909399;
    }

    .login-title {
        width: 224px;
        /*padding-left: 10px;*/
        text-align: center;
        /*padding-top: 7px;*/
        padding-bottom: 7px;
        color: #303133;
        line-height: 68px;
        font-weight: bold;
        /*display: inline-block;*/
        float: left;
        box-sizing: border-box;

    }
</style>
<template>
    <div id="app" v-loading="isLoading">
        <div>
            <el-form ref="loginForm" :model="form" :rules="rules"  class="login-box">
                <div style="vertical-align: middle;position: relative;padding-bottom: 10px;">
                    <img src="./assets/images/logo_icon.png" width="50" height="46" style="vertical-align: middle;float:left;margin-top:10px"/><div class="login-title">油气田开发项目经济评价平台</div>
                    <div style="clear:both;"></div>
                </div>
                <el-form-item prop="username">
                    <el-input type="text" placeholder="用户名" v-model="user.username" prefix-icon="el-icon-user"
                              @keyup.enter.native="user.password?login():$refs.passwd.focus();"
                    />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input ref="passwd" type="password" placeholder="密码" v-model="user.password" prefix-icon="el-icon-lock"  @keyup.enter.native="login"/>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="user.rememberMe">记住我</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%;" type="primary" v-on:click="login">登录</el-button>
                </el-form-item>
            </el-form>

            <el-dialog
                    title="温馨提示"
                    :visible.sync="dialogVisible"
                    width="30%">
                <span>请输入账号和密码</span>
                <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Login",
        data() {
            return {
                isLoading: false,
                user: {rememberMe:true},
                contentStyle: {
                    height: window.innerHeight - 61 + 'px',
                    width: '100%'
                },

            }
        },
        watch: {

        },
        mounted() {
            window.addEventListener("resize", event => {
                this.contentStyle.height = document.body.clientHeight - 61 + 'px';
            });
        },

        methods: {
            login: function () {
                if (!this.user.password || this.user.password == '') {
                    this.$message.warning("请填写密码")
                    return;
                }
                this.isLoading = true;
                let userData = JSON.parse(JSON.stringify(this.user));
                let rsaPassword = this.$encryption(userData.password);
                userData.password = rsaPassword;
                this.$post("/login/check", userData, (response) => {
                    location.href = envConfig[env].indexPath;
                }, (response) => {
                    if(response.code!=0) {
                        this.isLoading = false;
                    }
                });
            },
        }
    }
</script>
